import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Text,
  Platform,
  Image,
  Animated
} from 'react-native';
import { deviceHeight, deviceWidth, reallySize, titleHeight } from '../utils/Global';
import RootSiblings from 'react-native-root-siblings';
import RootToast from 'react-native-root-toast';

let sibling = undefined;
const Layer = {
  toast: null,
  showLongMsg: function (msg, type, options) {
    this.hiddenLoading(); // 得到回调，隐藏loading
    const toast = RootToast.show(
      Platform.OS === 'android' ? (
        <View style={styles.container}>
          <Text style={styles.message}>{msg}</Text>
        </View>
      ) : (
        msg
      ),
      {
        duration: 3000,
        position: RootToast.positions.CENTER,
        ...options,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
      },
    );
    setTimeout(function () {
      RootToast.hide(toast);
      typeof options === 'function' ? options && options() : null;
    }, 2500);
  },

  showMsgNoback: function (msg, type, options) {
    this.hiddenLoading(); //得到回调，隐藏loading
    let toast = RootToast.show(
      Platform.OS === "android" ? (
        <View style={styles.container}>
          {/*此处根据弹框类型选择icon或者image*/}
          {/* {type == "success" ? (
            <Image
              source={require("src/assets/success.png")}
              style={{
                width: 30,
                height: 30
              }}
              resizeMode="contain"
            />
          ) : (
            <Image
              source={require("src/assets/isNotConnected.png")}
              style={{
                width: 30,
                height: 30
              }}
              resizeMode="contain"
            />
          )} */}
          <Text style={styles.message}>{msg}</Text>
        </View>
      ) : (
        msg
      ),
      {
        duration: 2500,
        position: RootToast.positions.CENTER,
        ...options,
        backgroundColor: "rgba(0, 0, 0, 0.8)"
      }
    );
    setTimeout(function () {
      RootToast.hide(toast);
      typeof options === "function" ? options && options() : null;
    }, 1500);
  },


  showMsg: function (msg) {
    sibling = new RootSiblings(
      (
        <View style={{ width: deviceWidth, height: deviceHeight, alignItems: 'center', justifyContent: 'center', position: 'absolute', backgroundColor: 'rgba(0, 0, 0, 0)' }}>
          <View style={{ borderRadius: 6, backgroundColor: 'rgba(0, 0, 0, 0.8)', paddingVertical: reallySize(10), paddingHorizontal: reallySize(20) }}>
            <Text style={styles.message}>{msg}</Text>
          </View>
        </View>
      ),
    );
    setTimeout(function () {
      if (sibling instanceof RootSiblings) {
        sibling.destroy();
      }
    }, 1000);

    // this.hiddenLoading(); // 得到回调，隐藏loading
    // const toast = RootToast.show(
    //   Platform.OS === 'android' ? (
    //     <View style={styles.container}>
    //       <Text style={styles.message}>{msg}</Text>
    //     </View>
    //   ) : (
    //     msg
    //   ),
    //   {
    //     duration: 2500,
    //     position: RootToast.positions.CENTER,
    //     ...options,
    //     backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //   },
    // );
    // setTimeout(function() {
    //   RootToast.hide(toast);
    //   typeof options === 'function' ? options && options() : null;
    // }, 2000);
  },
  showMsg2: function (msg) {
    sibling = new RootSiblings(
      (
        <View style={{ width: deviceWidth, height: deviceHeight, alignItems: 'center', justifyContent: 'center', position: 'absolute', backgroundColor: 'rgba(0, 0, 0, 0)' }}>
          <View style={{ borderRadius: 6, backgroundColor: 'rgba(0, 0, 0, 0.8)', paddingVertical: reallySize(10), paddingHorizontal: reallySize(20) }}>
            <Text style={styles.message}>{msg}</Text>
          </View>
        </View>
      ),
    );
    setTimeout(function () {
      if (sibling instanceof RootSiblings) {
        sibling.destroy();
      }
    }, 500);

    // this.hiddenLoading(); // 得到回调，隐藏loading
    // const toast = RootToast.show(
    //   Platform.OS === 'android' ? (
    //     <View style={styles.container}>
    //       <Text style={styles.message}>{msg}</Text>
    //     </View>
    //   ) : (
    //     msg
    //   ),
    //   {
    //     duration: 2500,
    //     position: RootToast.positions.CENTER,
    //     ...options,
    //     backgroundColor: 'rgba(0, 0, 0, 0.8)',
    //   },
    // );
    // setTimeout(function() {
    //   RootToast.hide(toast);
    //   typeof options === 'function' ? options && options() : null;
    // }, 2000);
  },

  showLoadingTest: function () {
    sibling = new RootSiblings(
      (
        <View style={styles.maskStyle}>
          <View style={styles.backViewStyle}>

            <ActivityIndicator size="large" color="white" />
            {/* <Text
              style={{
                fontSize: 18,
                color: 'white',
                marginTop: 15,
              }}>
             
            </Text> */}
          </View>
        </View>
      ),
    );
    setTimeout(function () {
      sibling.destroy();
    }, 30000);
  },


  showLoading: function () {
    sibling = new RootSiblings(
      (
        <View style={styles.maskStyle}>
          <View style={styles.backViewStyle}>
            <ActivityIndicator size="large" color="white" />
            {/* <Text
              style={{
                fontSize: 18,
                color: 'white',
                marginTop: 15,
              }}>
             
            </Text> */}
          </View>
        </View>
      ),
    );
    setTimeout(function () {
      sibling.destroy();
    }, 30000);
  },

  hiddenLoading: () => {
    if (sibling instanceof RootSiblings) {
      sibling.destroy();
    }
  },
};

const styles = StyleSheet.create({
  maskStyle: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    width: deviceWidth,
    height: deviceHeight + titleHeight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backViewStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    width: reallySize(100),
    height: reallySize(100),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
  container: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  message: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 14,
    // lineHeight: Theme.autoHeight.px20,
  },
});

export default Layer;
